<template>
  <view class="serviceInfoPopup">
    <u-popup :show="serviceShow" :round="10" mode="bottom">
      <view class="title">
        服务信息
        <text class="font_family icon-guanbi_tongyong_1" @click="closeFn" />
      </view>
      <view class="content">
        <view class="info">
          <text class="font_family icon-shield_tongyong_1" />
          <view>
            <view class="tips">正品保障</view>
            <view class="tipsSm">方盛云采所售商品均有质量保证，提供正规发票，请您放心选购。<br>
              注：因厂家可能在没有任何提前通知的情况下更改商品包装、产地或者一些附件，方盛云采不能确保客户收到的货物与商品介绍完全一致，
              只能承诺正品保障！若平台没有及时更新，敬请谅解！</view>
          </view>
        </view>
        <view class="info">
          <text class="font_family icon-truck_tongyong_2" />
          <view>
            <view class="tips">30天退换</view>
            <view class="tipsSm">方盛云采所售商品自客户签收之日起30日内（含），不影响二次销售可享受30天无忧退货服务（部分商品除外）。</view>
          </view>
        </view>
        <view class="info">
          <text class="font_family icon-wrench_tongyong_1" />
          <view>
            <view class="tips">维修服务</view>
            <view class="tipsSm">方盛云采所售商品自客户签收之日起提供维修服务，您可在线提交申请或直接凭销售票据至鑫方盛任意一家分公司申请维修。</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    serviceFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      serviceShow: false
    }
  },
  watch: {
    serviceFlag(newVal, oldVal) {
      if (newVal != oldVal) {
        this.serviceShow = newVal
      }
    }
  },
  methods: {
    closeFn() {
      this.$emit('closeServiceFn', false)
    }
  }
}
</script>
<style scoped lang="scss">
.serviceInfoPopup {
  .title {
    width: 100%;
    height: 88rpx;
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    font-size:$uni-font-size-base;
    font-weight:bold;
    border-bottom:2rpx solid $uni-border-gray;
    color:$uni-text-color;
    .font_family {
      font-size: 48rpx;
      color: #d3d3d3;
      font-weight: normal;
    }
  }
  .content {
    padding: 30rpx 32rpx;
    box-sizing: border-box;
    padding-bottom: 200rpx;
    .info {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: flex-start;
      margin-top: 48rpx;
      .font_family {
        font-size: 48rpx;
        margin-right: 16rpx;
        position: relative;
        top:-4rpx;
        color: $uni-text-color-orange;
      }
      .tips {
        color:$uni-text-color;
        font-size:$uni-font-size-base;
        font-weight: bold;
      }
      .tipsSm {
        color:$uni-text-color;
        font-size:$uni-font-size-sm;
        font-weight: normal;
        margin-top: 16rpx;
        line-height: 34rpx;
      }
    }
    .info:first-child {
      margin-top: 0;
    }
  }
}
</style>
